<template>
  <div class="app-container">
    <el-col>
      <loadings :loading="loading">
        <el-card shadow="never">
          <div>
            <div>
              <div>
                <el-form ref="form" :model="ruleForm" label-width="80px"
                         size="mini" style="float: left">
                  <el-form-item label="产品名称" prop="productName">
                    <el-select v-model="ruleForm.pName" placeholder="请选择产品名称" style="width: 180px" size="mini"
                               @change="changeType">
                      <el-option v-for="item in options" :key="item.id" :label="item.productName"
                                 :value="item.productName" size="mini"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              <div class="app-headpiece">
                <el-button size="mini" @click="refreshList">刷新</el-button>
                <el-button size="mini" type="primary" @click="onAdd">创建FastBot测试</el-button>
                <div style="margin-top:10px"></div>
              </div>
            </div>
            <div>
              <el-table
                border
                size="mini"
                style="height: 100%"
                :data="tableData.slice((page_index-1)*page_size,page_index*page_size)"
                :header-cell-style="{background:'#f6f6f6'}">
                <el-table-column
                  prop="productName"
                  label="产品名称"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="apkPackageName"
                  label="应用包名"
                  width="300">
                </el-table-column>
                <el-table-column
                  prop="testName"
                  label="测试名称">
                </el-table-column>
                <el-table-column
                  prop="runningMinute"
                  label="遍历时长(分钟)"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="throttle"
                  label="遍历事件频率(毫秒)"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="更新时间"
                  width="150">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="150">
                  <template slot-scope="scope">
                    <el-button @click="onTableUpdate(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" :disabled="true">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div>
            <div class="pageone">
              <page :total="page_total" @pageChange="pageChange"></page>
            </div>
          </div>
        </el-card>
      </loadings>
    </el-col>
  </div>
</template>

<script>
import Page from '@/components/FastBot/Page'
import ELoading from "@/components/FastBot/ELoading";
import {socket} from "@/utils/socket";

export default {
  data() {
    return {
      loading: false,
      page_total: undefined,
      page_index: 1, //页码
      page_size: 15, //每页展示条数
      options: [],
      ruleForm: {
        pName: ''
      },
      tableData: []
    }
  },
  components: {
    page: Page,
    loadings: ELoading
  },
  created() {
    this.getList()
    this.getProduct()
  },
  deactivated() {
    this.$destroy()
  },
  methods: {
    getProduct() {
      this.get('/api/fastbot/getProduct', '', function (resp) {
        this.options = resp.result
      })
    },
    // 刷新
    refreshList() {
      this.ruleForm.pName = ''
      this.getList()
    },
    getList() {
      this.loading = true
      this.get('/api/fastbot/list', '', function (resp) {
        this.page_total = resp.result.length
        this.tableData = resp.result
        this.loading = false
      }, err => {
        this.loading = false
      })
    },
    // 新增
    onAdd() {
      this.goRoute(`create/0`)
    },
    // 编辑
    onTableUpdate: function (row) {
      this.goRoute(`create/${row.id}`)
    },
    changeType() {
      this.get('/api/fastbot/getProductList?productName=' + this.ruleForm.pName, '', function (resp) {
        this.page_total = resp.result.length
        this.tableData = resp.result
      })
    },
    pageChange(item) {
      console.log("pageone:", item);
      this.page_index = item.currentPage;
      this.page_size = item.pageSize;
      console.log(`每页展示${this.page_size}条，当前为${this.page_index}页`);
      //   this.query(); //页面改变后通过query()方法向后台请求数据渲染页面
    }
  }
}
</script>

<style scoped>

</style>
